:root {
  --a-color:#D8BFD8;
  --b-color:#E0FFFF;
  --c-color:#303030;
  --d-color:#F0F0DF;
  --e-color:#FF0000;
}
[data-theme="dark"] {
  --a-color:#886F88;
  --b-color:#90AFAF;
  --c-color:#EFEFEF;
  --d-color:#506A60;
  --e-color:#FCFC90;
}
html {
  height:100svh;
  overflow:hidden;
}
body {
  margin:0px;
  width:100svw;
  height:100svh;
  background:linear-gradient(to bottom right,var(--a-color),var(--b-color)) no-repeat left top;
}
.oper {
  float:left;
  font-size:2rem;
  color:var(--c-color);
  border:3px double var(--c-color);
  background-color:var(--d-color);
}
.oper:hover {
  border:5px solid var(--c-color);
}
.pico {
  position:absolute;
  display:block;
}
#con {
  color:var(--e-color);
  border:none;
}
#d-b {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  position:relative;
  top:0;
  width:100%;
}
#d-i {
  position:absolute;
  width:100svw;
  left:0;
  bottom:0;
}
#d-a {
  display:none;
}
#c-m {
  position:absolute;
  z-index:-1;
  left:0;
  bottom:0;
}
#i-c {
  z-index:1;
  width:5svw;
  height:5svh;
}
#p-c {
  display:inline;
  margin:0;
  border:0;
  font-size:1.5rem;
}